<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="按钮类型">
                <el-select v-model="propJson.type" placeholder="按钮类型" style="width: 100%">
                    <el-option label="默认" value="default" />
                    <el-option label="普通" value="primary" />
                    <el-option label="成功" value="success" />
                    <el-option label="日志级别" value="info" />
                    <el-option label="警告" value="warning" />
                    <el-option label="危险" value="danger" />
                </el-select>
            </el-form-item>
            <el-form-item label="按钮命名">
                <el-input v-model="propJson.buttonName" style="width: 100%" placeholder="按钮命名" />
            </el-form-item>
            <el-form-item label="是否透明背景">
                <el-radio-group v-model="propJson.plain">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否圆角">
                <el-radio-group v-model="propJson.round">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义颜色">
                <el-radio-group v-model="propJson.isCustomColor">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否添加事件结束弹框">
                <el-radio-group v-model="propJson.isAddMessage">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="按钮颜色" v-if="propJson.isCustomColor">
                <el-color-picker v-model="propJson.customColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="按钮大小">
                <el-select v-model="propJson.size" placeholder="按钮大小" style="width: 100%">
                    <el-option label="小号" value="small" />
                    <el-option label="默认" value="default" />
                    <el-option label="大号" value="large" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否仅图标，不展示文字">
                <el-radio-group v-model="propJson.circle">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择图标" v-if="propJson.circle">
                <el-select v-model="propJson.iconOnly" clearable placeholder="选择图标" filterable style="width: 100%">
                    <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="前置按钮图标" v-if="!propJson.circle">
                <el-select v-model="propJson.iconBefore" clearable placeholder="选择图标" filterable style="width: 100%">
                    <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="后置按钮图标" v-if="!propJson.circle">
                <el-select v-model="propJson.iconAfter" clearable placeholder="选择图标" filterable style="width: 100%">
                    <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否展示Loading">
                <el-radio-group v-model="propJson.isLoading">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否展示角标">
                <el-radio-group v-model="propJson.isAddBadge">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="角标类型" v-if="propJson.isAddBadge">
                <el-select v-model="propJson.badgeType" placeholder="角标类型" style="width: 100%">
                    <el-option label="普通" value="primary" />
                    <el-option label="成功" value="success" />
                    <el-option label="日志级别" value="info" />
                    <el-option label="警告" value="warning" />
                    <el-option label="危险" value="danger" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否只展示小圆点" v-if="propJson.isAddBadge">
                <el-radio-group v-model="propJson.badgeIsBot">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="角标为数字时最大展示的数字" v-if="propJson.isAddBadge && !propJson.badgeIsBot">
                <el-input-number v-model="propJson.badgeMaxNum" :min="0"/>
            </el-form-item>

            <el-divider v-if="propJson.isAddBadge && !propJson.badgeIsBot">角标展示值设置</el-divider>

            <CommonThirdServiceValue v-if="propJson.isAddBadge && !propJson.badgeIsBot" :actionInfo="propJson.badgeValue ? propJson.badgeValue : {}" :commonParam="commonParam" />

            <el-divider>点击行为</el-divider>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addClickAction()">添加点击行为</el-button>
            </div>

            <CommonThirdServiceAction :actionList="propJson.clickAction" :commonParam="commonParam"/>
        </el-form>

    </div>
</template>

<script>
import {componentIconInfoQuery} from "@/request/components";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue"

export default {
    name: "ButtonDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceAction,
        CommonThirdServiceValue
    },
    data() {
        return {
            icons: []
        }
    },
    methods: {
        addClickAction() {
            if (!this.propJson.clickAction) {
                this.propJson.clickAction = []
            }
            let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", apiType: "MSOA", apiPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
            this.propJson.clickAction.push(variableInfo)
        }
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    mounted() {
        let param = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 1000
            }
        }
        componentIconInfoQuery(param).then(res => {
            this.icons = res.data;
        });
    }
}
</script>

<style scoped lang="less">
.drawerContainer {
    width: 100%;
}
</style>